<template>
  <div>
    <div id="detailA">
      <div class="on">
        <span class="iconfont" @click="$router.go(-1)">&#xe6bc;</span>
        <h2>{{ info.goodsname }}</h2>
        <p>
          <span class="iconfont">&#xf0112;</span>
          <i></i>
          <span class="iconfont">&#xe71e;</span>
        </p>
      </div>
      <div class="under">
        <ul>
          <li>
            <span
              >商品
              <i></i>
            </span>
          </li>
          <li>评价</li>
          <li>详情</li>
          <li>推荐</li>
        </ul>
      </div>
    </div>
    <div id="mainD">
      <div class="danner">
        <img :src="info.img" alt="" />
      </div>
      <div class="on">
        <i>
          ￥
          <span>{{ info.price }}</span>
          <span>￥{{ info.market_price }}</span>
          <span><span class="iconfont">&#xe60f;</span>收藏</span>
        </i>
        <span class="s1">{{ info.goodsname }}</span>
        <span class="s3">11.11限时优惠</span>
        <p>
          <span>此商品于2020-11-11.00点结束，品牌闪购专场</span>
          <span>查看<span class="iconfont">&#xe601;</span></span>
        </p>
      </div>
      <div class="under">
        <p class="p1">
          <span>领劵</span>
          <img src="../assets/images/images/2.1.jpg" alt="" />
          <img src="../assets/images/images/2.2.jpg" alt="" />
          <img src="../assets/images/images/2.3.jpg" alt="" />
        </p>
        <p class="p2">
          <span>分期</span>
          <span>可选3/6/12期</span>
          <span class="iconfont">&#xe601;</span>
        </p>
      </div>
      <div v-html="info.description" id="detail"></div>
    </div>
    <div id="footerD">
      <ul>
        <li>
          <span class="iconfont">&#xe62d;</span>
          <p>客服</p>
        </li>
        <li>
          <span class="iconfont">&#xeb70;</span>
          <p>店铺</p>
        </li>
        <li>
          <span class="iconfont">&#xe612;</span>
          <p>购物车</p>
        </li>
      </ul>
      <p class="p1" @click="goScar()">加入购物车</p>
      <p class="p2" @click='shopping()'>立即购买</p>
    </div>
  </div>
</template>

<script>
import { getGoodsDetail, cartlist } from "../request/api";

export default {
  data() {
    return {
      info: {},
    };
  },
  mounted() {
    getGoodsDetail({
      id: this.$route.params.id,
    }).then((res) => {
      console.log("商品详情");
      if (res.data.code == 200) {
        this.info = res.data.list[0];
        console.log(res, 33666);
      }
    });
  },
  methods: {
    //点击跳转到购物车页面
    goScar() {
      //获取token值
      let uid = "";
      uid = JSON.parse(sessionStorage.getItem("userinfo")).uid;
      console.log(this.$router, "去购物车页面");
      cartlist({
        uid,
        goodsid: this.info.id,
        num: 1,
      }).then((res) => {
        console.log(res, 666);
      });
    },
    //点击购买跳转到购物车
    shopping(){
      this.$router.push('/scar')
    }
  },
};
</script>

<style scoped>
/*头部*/
@import "../assets/css/detail.css";

#detail >>> img {
  width: 100%;
}
</style>
